<template>
    <div class="dialog-notice">
        <el-dialog title="新增管理员" :visible.sync="dialogVisible" width="35%" @close="handleClose('form')">
            <el-form :model="form" :rules="rules" status-icon ref="form">
                <el-form-item prop="avatarUrl" label="头像" :label-width="formLabelWidth">
                    <el-upload class="upload-demo" action="http://134.175.252.64:8080/file/upload"
                        :on-success="handleSuccess" multiple :limit="2" :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item prop="roleId" label="角色" :label-width="formLabelWidth">
                    <el-select size="small" v-model="value" placeholder="请选择管理员角色">
                        <el-option v-for="item in options" :key="item.roleCode" :label="item.roleName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="userAccount" label="账号" :label-width="formLabelWidth">
                    <el-input v-model="form.userAccount" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item prop="username" label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item prop="userTel" label="电话" :label-width="formLabelWidth">
                    <el-input v-model="form.userTel" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="form.email" autocomplete="off" size="small"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form')">取 消</el-button>
                <el-button type="info" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'AddAdminDialog',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        return {
            dialogVisible: false,
            form: {
                username: '',
                password: '',
                userAccount: '',
                userTel: '',
                email: '',
                avatarUrl: '',
                roleId: ''
            },
            formLabelWidth: '80px',
            rules: {
                username: [{ required: true, message: '用户名不能为空！', trigger: 'blur' }],
                password: [{ required: true, message: '密码不能为空！', trigger: 'blur' }],
                userAccount: [{ required: true, message: '账号不能为空！', trigger: 'blur' }],
                avatarUrl: [{ required: true, message: '头像不能为空！', trigger: 'blur' }],
                roleId: [{ required: true, message: '请选择管理员角色！', trigger: 'blur' }],
            },
            fileList: [],
            imageUrl: '',
            options: [],
            value: ''
        }
    },
    computed: {
        ...mapState('userStore', ['userInfo']),
        hasId() {
            return 'id' in this.form
        }
    },
    watch: {

    },
    mounted() {
        this.$bus.$on('add', this.dialogShow)
    },
    methods: {
        handleClose(formName) {
            this.form = {}
            this.$refs[formName].resetFields();
            this.value = ''
            this.fileList = []
        },
        // 获取角色列表
        getRoleData() {
            this.request.get('/role/getRoleList').then(res => {
                if (res.code == 20000) {
                    this.options = res.data
                }
            })
        },
        submitForm(formName) {
            this.form.avatarUrl = this.imageUrl
            this.form.roleId = this.value
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let obj = {
                        username: this.form.username,
                        password: this.form.password,
                        userAccount: this.form.userAccount,
                        userTel: this.form.userTel,
                        email: this.form.email,
                        avatarUrl: this.form.avatarUrl,
                        roleId: this.form.roleId
                    }

                    this.$emit('addAdmin', obj)

                    this.dialogVisible = false
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false
        },
        dialogShow(value) {
            this.dialogVisible = value
            this.getRoleData()
        },
        handleSuccess(response, file, fileList) {
            this.$set(this.fileList, 0, file)
            this.imageUrl = response.data.url
        }
    }
};
</script>
<style lang='less' scoped>
.dialog-notice {
    background-color: aqua;

    .el-form {
        padding: 10px 40px;
    }

    .el-input__inner:focus {
        border-color: #11A983 !important;
        /* 使用!important确保覆盖 */
    }

    .upload-demo {
        .el-button--primary {
            color: white;
            background-color: #11A983;
        }
    }
}
</style>